<template>
  <div class="my">
    <div class="my_top">
      <div class="usershow">
        <img :src="userInfo.photo" alt="" />
        <div class="username">
          <p>{{ userInfo.name }}</p>
          <van-button
            plain
            hairline
            round
            type="info"
            size="mini"
            v-if="userInfo.certi === ''"
            >申请认证</van-button
          >
          <p v-else>{{ userInfo.certi }}</p>
        </div>
        <div class="around"></div>
        <div class="read">
          <i class="iconfont icon-Bookmark"></i>
          <div>
            <p>今日阅读</p>
            <span>5分钟</span>
          </div>
        </div>
      </div>
      <div class="userabout">
        <div class="item" @click="goMywork">
          <p>{{ userInfo.art_count }}</p>
          <span>动态</span>
        </div>
        <div class="item">
          <p>{{ userInfo.follow_count }}</p>
          <span>关注</span>
        </div>
        <div class="item">
          <p>{{ userInfo.fans_count }}</p>
          <span>粉丝</span>
        </div>
      </div>
    </div>
    <van-grid :column-num="3">
      <van-grid-item text="收藏">
        <template #icon>
          <van-icon name="star-o" color="#eb5253" size="28" />
        </template>
      </van-grid-item>
      <van-grid-item text="历史">
        <template #icon>
          <van-icon name="clock-o" color="#ff9d1d" size="28" />
        </template>
      </van-grid-item>
      <van-grid-item text="作品">
        <template #icon>
          <!-- <van-icon name="records" color="#678eff" size="28" /> -->
          <i class="iconfont icon-zuopin"></i>
        </template>
      </van-grid-item>
    </van-grid>
    <van-cell-group class="content">
      <van-cell title="消息通知" is-link />
      <van-cell title="实名认证" is-link />
    </van-cell-group>
    <van-cell-group class="content">
      <van-cell title="用户反馈" is-link />
      <van-cell title="小智同学" is-link />
      <van-cell title="系统设置" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    // actions的辅助函数
    ...mapActions(['setUserInfo']),
    // 点击动态按钮
    goMywork () {}
    // 点击关注按钮
  },
  created () {
    this.setUserInfo()
  }
}
</script>

<style lang="less" scoped>
.my {
  background-color: #f5f7f9;
  .my_top {
    width: 100%;
    height: 200px;
    background: url(~@/assets/images/my-banner.png) no-repeat;
    background-size: cover;
    overflow: hidden;
    color: #fff;
    .usershow {
      display: flex;
      height: 66px;
      margin-top: 58px;
      padding-left: 20px;
      align-items: center;
      justify-content: space-between;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 1px solid #fff;
        margin-right: 15px;
      }
      .username {
        p {
          font-size: 15px;
          margin-bottom: 9px;
        }
      }
      .around {
        flex: 1;
      }
      .read {
        display: flex;
        align-items: center;
        width: 82px;
        height: 40px;
        padding-left: 12px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 20px 0 0 20px;
        font-size: 17px;
        div {
          margin-left: 10px;
          font-size: 12px;
        }
      }
    }
    .userabout {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
      text-align: center;
    }
  }
  .icon-zuopin {
    color: #678eff;
    font-size: 28px;
  }
  .content {
    margin: 5px 0;
  }
}
</style>
